<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    name: 'App',
    created() {

    },
    data() {
        return {
            
        }
    },
    methods: {
        ...mapActions(['menuInit']),
    },
    watch: {
        //初次运行进入这里,切换页面进入这里，需要初始化菜单和路由
        //不需要登录的页面(例如登录页面，在静态路由表中配置meta.needLogin)，无需拿数据
        //已经拿过了，无需再拿
        '$route.path': {
            immediate: true,
            handler(newVal) {
                //登录页面和根路由不做处理
                if(newVal =="/login" || newVal == "/"){
                    return
                }
                //已经拿过了，无需再拿
                if(this.menuIsReady){
                    return
                }
                //拿权限数据
                if (window.localStorage.getItem('_token')) {
                    //菜单初始化
                    this.menuInit(this)
                }else{
                    //跳转登录页，进行登录
                    this.$alert("请先登录!", '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            //跳转登录页面
                            this.$router.replace({ name: 'login' })
                        }
                    })
                }
            },
        }
    },
    computed: {
        ...mapState(['menuIsReady'])
    }
}
</script>

<style>
#app {
    height: 100%;
    font-size: 14px;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
</style>
